<template>
  <div>
    <mt-header fixed title="健康知识">
      <mt-button icon="back" @click="$router.back()" slot="left"></mt-button>
    </mt-header>
    <div style="height:8vh;"></div>
    <div style="padding:0 4vw;">
        <public-list v-for="(v,i) in articles" :key="i" :items='v' @click.native="goto(v.lid)"></public-list>
        <!--  v-if="!articles.length==0" 如果没有请求数据是页面占不了一平,infinite-scrool-distance会自动加载 -->
        <div infinite-scroll-distance="10" v-infinite-scroll="loadMore" v-if="!articles.length==0">
            <div class="information"  v-if="infor">{{loadText}}</div>
        </div>
    </div>
  </div>
</template>

<script>
import PublicList from "@/components/PublicList.vue";
export default {
  components: { PublicList },
  data() {
    return {
      articles:[],infor:false,loadText:'正在加载...',page:1,
    };
  },
  methods: {
    getData(pack, arr, callback) {
      // 降速测试跳转页面是否请求
      if (arr.length == 0) {
        // 调用方法执行加载
        this.$indicator.open({
          text: "加载中...",
          spinnerType: "fading-circle",
        });
      }
      this.axios.get(`/details?page=${pack}`).then(res => {
        callback(res.data.data);
        // 如果有数据清空加载
        if (res) {
          this.$indicator.close();
        }
      });
    },
    loadMore() {
      this.infor = true;
      this.page++
      this.getData(this.page, this.articles, data => {
        if (!data) {
          this.loadText = "没有更多数据";
          // 如果没有数据了让getData等于空 如果用null后台会报错,还在调用getData只是没有发请求
          this.getData = ()=>{}
        } else {
          this.articles.push(...data);
        }
      });
    },
    goto(value){
      this.$router.push(`/articledetail?lid=${value}`)
      this.articles.forEach(v=>{
        if(v.lid==value){
          v.pageviews++
        }
      })
    },
  },
  mounted(){
    this.getData(1,this.articles,(data)=>{this.articles=data})
  },
  activated(){
    scrollTo(0, 0)
  },
};
</script>

<style lang="scss" scoped>
::v-deep .mint-header,
::v-deep .mint-header-title,
::v-deep .mintui {
  background-color: #fff;
  color: #000;
  font-size: 1.5rem;
  font-family: "楷体";
  font-weight: 600;
}
.information{
    text-align: center;
    margin: 1vw 0;
    color: rgb(75, 75, 75);
}
</style>
